<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>SJGameAdmin | Log in</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" href="${ctx!}/assets/plugins/bootstarp/css/bootstrap.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="${ctx!}/assets/plugins/font-awesome/css/font-awesome.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="${ctx!}/assets/plugins/Ionicons/css/ionicons.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="${ctx!}/assets/css/AdminLTE.css">
    <!-- iCheck -->
    <link rel="stylesheet" href="${ctx!}/assets/plugins/iCheck/square/blue.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="${ctx!}/assets/js/html5shiv.min.js"></script>
    <script src="${ctx!}/assets/js/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="${ctx!}/assets/css/juerycss/screen.css">
    <!-- Google Font -->
    <#--<link rel="stylesheet"-->
          <#--href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">-->
    <link rel="stylesheet" href="${ctx!}/assets/plugins/google/css.css">
</head>
<body class="hold-transition login-page" style="height: auto">
<div class="login-box" id="app">
    <div class="login-logo">
        <a href="../../index2.html"><b>SJGameAdmin</b></a>
    </div>
    <!-- /.login-logo -->
    <div class="login-box-body">
    <#--<p class="login-box-msg"></p>-->
        <#if message??>
        <div class="alert alert-danger alert-dismissible">
            <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
            <h4><i class="icon fa fa-ban"></i> Error!</h4>
            ${message}
        </div>
        </#if>
       <#--<form id="form-login" class="form-horizontal" action="${ctx!}/login" method="post">-->
            <#--<div class="form-group has-feedback">-->
                <#--<label class="control-label col-lg-3" style=";width: 100px;float: left;" for="username">账号：</label>-->
                <#--<div class="col-lg-9">-->
                <#--<input type="username" name="username" id="username" class="form-control" placeholder="username">-->
                <#--<span class="glyphicon glyphicon-envelope form-control-feedback"></span>-->
                <#--</div>-->
            <#--</div>-->
            <#--<div class="form-group has-feedback">-->
                <#--<label class="control-label col-lg-3" style=";width: 100px;float: left;" for="password">密码：</label>-->
                <#--<div class="col-lg-9">-->
                <#--<input type="password" name="password" id="password" class="form-control" placeholder="password">-->
                <#--<span class="glyphicon glyphicon-lock form-control-feedback"></span>-->
                <#--</div>-->
            <#--</div>-->
           <#---->
            <#--<div class="row">-->
                <#--<!-- /.col &ndash;&gt;-->
                <#--<div class="col-xs-4 col-xs-offset-8">-->
                    <#--<button type="submit" class="btn btn-primary btn-block btn-flat btn-sign">Sign In</button>-->
                <#--</div>-->
                <#--<!-- /.col &ndash;&gt;-->
            <#--</div>-->
        <#--</form>-->


        <form id="form-login" class="form-horizontal" action="${ctx!}/login" method="post" >
            <div class="box-body">
                <div class="form-group">
                    <label for="username" class="col-sm-3 control-label">账号：</label>
                    <div class="col-sm-8">
                        <input type="username" name="username" id="username" class="form-control" placeholder="username">
                        <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
                    </div>
                </div>
                <div class="form-group">
                    <label for="password" class="col-sm-3 control-label">密码：</label>
                    <div class="col-sm-8">
                        <input type="password" name="password" id="password" class="form-control" placeholder="password">
                        <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                    </div>
                </div>

                <div class="form-group">
                    <label class="control-label col-sm-3 " for="code">验证码：</label>
                    <div class="col-sm-5" style="float: left;">
                        <input type="code" name="code"  class="form-control" value="" id="code" placeholder="请输入验证码">
                    </div>
                    <div class="col-sm-3" style="float: left;;height: 40px;">
                        <a href="javascript:changecha();"><img id="kaptcha" src="${ctx!}/Kaptcha.jpg"/></a>
                    </div>
                </div>
            </div>
            <div class="box-footer">
                <button type="submit" class="btn btn-info pull-right btn-submit">登录</button>
            </div>
        </form>



    </div>
    <!-- /.login-box-body -->
</div>
<!-- /.login-box -->

<!-- jQuery 3 -->
<script src="${ctx!}/assets/plugins/jquery/jquery.min.js"></script>
<script src="${ctx!}/assets/plugins/jquery/jquery.validate.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="${ctx!}/assets/plugins/bootstarp/js/bootstrap.js"></script>
<!-- iCheck -->
<script src="${ctx!}/assets/plugins/iCheck/icheck.js"></script>
<script>
    $(function () {
        $('input').iCheck({
            checkboxClass: 'icheckbox_square-blue',
            radioClass: 'iradio_square-blue',
            increaseArea: '20%' // optional
        });
    });
    function changecha() {
        document.getElementById("kaptcha").src="${ctx!}/Kaptcha.jpg?"+Math.random();
        $("#kaptchald").focus();
    }


    //声明一个函数
    function validform() {
        return $("#form-login").validate({
            rules : {
                username : {
                    required : true
                },
                password : {
                    required : true
                },
                code : {
                    required : true,
                    remote: {
                        type: "get",
                        url: "${ctx!}/checkcode",
                        data: {
                            code: function() {
                                return $("#code").val();
                            }
                        },
                        dataType: "JSON",
                        dataFilter: function(data, type) {
                            var data=JSON.parse(data)
                            if (data.code ==-1)

                                return false;
                            else
                                return true;
                        }
                    }
                }

            },
            messages : {
                username : {
                    required : "账户名不能为空"
                },
                password : {
                    required : "密码不能为空"
                },
                code : {
                    required : "验证码不能为空",
                    remote: "验证码不正确"
                }
            }
        });
    }

    $(validform());




</script>
</body>
</html>
